<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
    <!-- import Vue before Element -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
<div id="app">
    <template>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账户">
                <el-input v-model="formInline.userAccount" placeholder="用户账户"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称">
                <el-input v-model="formInline.userName" placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="formInline.phone" placeholder="电话号码"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-model="formInline.email" placeholder="用户邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUsers">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userAccount"
                    label="账号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="昵称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="primary"
                               size="small">修改
                    </el-button>
                    <el-button @click="deleteClick(scope.row)" type="danger"
                               size="small">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 15]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="usersCount">
            </el-pagination>
        </div>

        <el-dialog :modal-append-to-body="false" title="修改信息" width="35%"
                   :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" status-icon hide-required-asterisk="false" ref="ruleForm"
                     label-width="80px" class="demo-ruleForm">
                <el-form-item label="用户账号" prop="userAccount">
                    <el-input v-model="ruleForm.userAccount"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm()">立即修改</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </template>
</div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogFormVisible: false,
                tableData: [
                    {
                        id: 100,
                        userAccount: '898989',
                        userName: 'gege',
                        createTime: '2001-10-18',
                        phone: '9999999999',
                        email: '123@qq.com',
                    }
                ],
                ruleForm: {
                    id: '',
                    userAccount: '',
                    userName: '',
                    phone: '',
                    email: '',
                },
                // currentPage: 1,
                // pageSize: 5,
                usersCount: '',
                formInline: {
                    id: '',
                    userAccount: '',
                    userName: '',
                    phone: '',
                    email: '',
                    currentPage: 1,
                    pageSize: 5,
                }
            };
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            open(row) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:7070/user/delete/' + row.id);
                    window.location.reload()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteClick(row) {
                this.open(row);
            },
            // 提交表单数据
            submitForm() {
                console.log(this.ruleForm);
                axios.post('http://localhost:7070/user/update', this.ruleForm)
                    .then(response => {
                        let code = response.data.code;
                        let message = response.data.message;
                        if (code === 2000) {
                            this.$message({
                                message: message,
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: message,
                                type: 'error'
                            })
                        }
                    })
            },
            // 表单数据提交
            getUsers() {
                axios.put('http://localhost:7070/user/condition', this.formInline)
                    .then(response => {
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            handleClick(row) {
                console.log(row);
                this.dialogFormVisible = true;
                this.ruleForm.id = row.id;
                this.ruleForm.userAccount = row.userAccount;
                this.ruleForm.userName = row.userName;
                this.ruleForm.phone = row.phone;
                this.ruleForm.email = row.email;
            },
            getUsersCount() {
                axios.get('http://localhost:7070/user/count')
                    .then(response => {
                        this.usersCount = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.getUsers();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.currentPage = val;
                this.getUsers();
            }
        },
        created() {
            this.getUsersCount();
            this.getUsers();
        }
    })
</script>